<script setup lang="ts">
import {
  Viewer,
  UrlTemplateImageryProvider,
  ImageryLayer,
  Math,
  Cartesian3,
  GeoJsonDataSource,
  Color,
  ColorMaterialProperty,
  SampledProperty,
  ConstantProperty,
  KmlDataSource,
  Cesium3DTile,
  Cesium3DTileset,
  Cesium3DTileStyle,
} from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import { onMounted, ref } from 'vue'
import wxSxyKml from './kml/wuxi_shuixiangyuan.kml?url'
import modifyMap from '../utils/modifyMap'
import fr from './fr.frag?raw'
;(window as any).CESIUM_BASE_URL = '/cesium'
const contentRef = ref<HTMLDivElement>()

onMounted(async () => {
  const viewer = new Viewer(contentRef.value!, {
    // infoBox: false,
    /** 搜索框 */
    geocoder: false,
    /** home按钮 */
    homeButton: false,
    // 动画控件
    animation: false,
    // 全屏按钮
    fullscreenButton: false,
    // 场景模式选择器
    sceneModePicker: false,
    // 时间轴
    timeline: false,
    // 导航提示
    navigationHelpButton: false,
    // 地图选择器
    baseLayerPicker: false,
  })

  const layer = new ImageryLayer(
    new UrlTemplateImageryProvider({
      url: 'http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
      minimumLevel: 1,
      maximumLevel: 18,
    }),
    {}
  )

  viewer.imageryLayers.add(layer)

  modifyMap(viewer)

  viewer.camera.setView({
    destination: Cartesian3.fromDegrees(116.398115, 39.907913, 9950000),
    orientation: {
      /** 相机朝向 */
      heading: Math.toRadians(0),
      /** 相机俯视角 */
      pitch: Math.toRadians(-90),
      /** 相机翻滚角 */
      roll: 0,
    },
  })

  // const kmlSource =await KmlDataSource.load(wxSxyKml, {
  //   clampToGround: true,
  //   camera: viewer.scene.camera,
  //   canvas: viewer.scene.canvas,
  // })

  // console.log(kmlSource)

  // viewer.dataSources.add(kmlSource)

  const tileSource = await Cesium3DTileset.fromUrl(`/gcj02_wuxi_shuixiangyuan_3dtiles/tileset.json`, {})
  // tileSource.tileVisible.addEventListener((tile: Cesium3DTile) => {
  //   const { content } = tile
  //   for (let i = 0; i < content.featuresLength; i++) {
  //     const feature = content.getFeature(i)
  //     // console.log(feature)
  //     const model = feature.content._model

  //     if (model && model._pipelineResources) {
  //       model._pipelineResources[1].fragmentShaderSource.sources[0] = fr
  //     }

  //     // 片元着色器已经修改，需要更新
  //     model._shouldRegenerateShaders = true
  //   }
  // })

  tileSource.style = new Cesium3DTileStyle({
    defines: {
      height: "Number(${feature['Height']})",
    },
    // color: "color('rgba(255,255,0,0.5)')",
    // color: "color('yellow')",
    // color: "color('#f00')",
    color: {
      conditions: [
        ['${height} >= 60', "color('red')"],
        ['${height} >= 40', "color('yellow')"],
        ['${height} >= 20', "color('green')"],
        ['true', "color('#E8F1F2', 0.5)"],
      ],
    },
    show: true,
  })
  viewer.zoomTo(tileSource)
  viewer.scene.primitives.add(tileSource)
})
</script>

<template>
  <div class="three-tiles-test" ref="contentRef"></div>
</template>

<style lang="scss" scoped>
.three-tiles-test {
  height: 100%;
  width: 100%;
}
</style>
